<template>
  <van-overlay
    :show="isLocalLoadingShow"
    @click="isLocalLoadingShow = false"
    class="loading"
    :class="type === 2 ? 'on' : ''"
  >
    <div class="loading_content">
      <van-loading color="#a52a2a" />
    </div>
  </van-overlay>
</template>
<script>
export default {
  name: "Loading",
  props: {
    isLoadingShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    type: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      isLocalLoadingShow: false,
    };
  },
  watch: {
    isLocalLoadingShow(v) {
      this.$emit("updateLoadingShow", v);
    },
  },
  created() {
    this.isLocalLoadingShow = this.$props.isLoadingShow;
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  z-index: 2000;
  &.on {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.05);
  }
  .loading_content {
    margin: 0 auto;
    background-color: #fff;
    padding: 10 / @base;
    border-radius: 5 / @base;
    box-shadow: rgba(0, 0, 0, 0.2) 1 / @base 5 / @base 5 / @base;
  }
}
</style>
